<script setup>
import { getCurrentInstance, reactive, ref } from 'vue';
import tools from '../tools/tools';
const loading = ref(true)
const { proxy } = getCurrentInstance();
// 获取飙升榜歌单信息
const list = reactive([]);
let t=ref("")
let num=ref("")
 proxy.$https.toplist()
 .then((res)=>{list.push(res.data);
    // 更新时间
     t =list.length===0?"":list[0].playlist.trackNumberUpdateTime;
    // 播放量
     num =list.length===0?"":list[0].playlist.playCount
});

// 获取飙升榜歌单详情歌曲
const musicList = reactive({});
proxy.$https.topMusic().then(res => {
    musicList.value = res.data.songs;
    if (res.status === 200) { loading.value = false }
});
function getId(id) {
    tools.E.emit("Myevent", id);
    tools.E.emit("songs",musicList )

}
</script>

<template>
    <el-skeleton style="width: 240px" :loading="loading" animated>
        <template #template>
            <div style="display:flex;width: 100%;">
                <el-skeleton-item variant="image"
                    style="width: 150px; height: 150px;margin-right: 50px;flex-shrink: 0;" />
                <div>
                    <el-skeleton-item variant="h3" style="width: 100px;" /><br />
                    <el-skeleton-item variant="h3" style="width: 100px;margin-top: 10px;" />
                    <el-skeleton-item variant="h3" style="width: 150px;margin-top: 10px;" />
                    <el-skeleton-item variant="h3" style="width: 200px;margin-top: 10px;" />
                </div>
            </div>
            <div style="width=100%">
                <el-skeleton-item variant="text" style="width: 1200px; height:30px;margin-top: 30px;" />
                <el-skeleton-item variant="text" style="width: 1200px; height:30px;margin-top: 10px;" />
                <el-skeleton-item variant="text" style="width: 1200px; height:30px;margin-top: 10px;" />
                <el-skeleton-item variant="text" style="width: 1200px; height:30px;margin-top: 10px;" />
                <el-skeleton-item variant="text" style="width: 1200px; height:30px;margin-top: 10px;" />
                <el-skeleton-item variant="text" style="width: 1200px; height:30px;margin-top: 10px;" />
                <el-skeleton-item variant="text" style="width: 1200px; height:30px;margin-top: 10px;" />
                <el-skeleton-item variant="text" style="width: 1200px; height:30px;margin-top: 10px;" />
            </div>
        </template>
        <template #default>
            <div class="box">
                <img :src="list[0].playlist.coverImgUrl" alt="">
                <div class="smallBox">
                    <p>
                        <img src="../assets/OIP-C.jpg" alt="">
                        <span>歌单</span><b>飙升榜</b>
                    </p>
                    <div><span>最近更新:</span> {{ tools.time(t) }}</div>
                    <div>
                        <span>歌曲:</span> {{ list[0].playlist.trackCount }}
                        <span class="count">播放量:</span> {{ tools.Num(num) }}次
                    </div>
                    <div><span>简介:</span> {{ list[0].playlist.description }}</div>
                </div>
            </div>
            <main>
                <el-table :data="musicList.value" style="width: 100%;height: 380px; overflow: auto;">
                    <el-table-column prop="name" label="歌曲" width="200" />
                    <el-table-column prop="ar[0].name" label="歌手" width="200" />
                    <el-table-column prop="al.name" label="专辑" width="300" />
                    <el-table-column prop="" label="" width="100" />
                    <el-table-column prop="address" label="播放">
                        <template v-slot="scope">
                            <el-button @click.prevent="getId(scope.row)">
                                点击播放
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </main>
        </template>
    </el-skeleton>
</template>
<style scoped>
.box {
    display: flex;
    margin-top: 0;
}

.box img {
    width: 150px;
    height: 150px;
    margin-right: 50px;
    border-radius: 10px;
}

.box .smallBox p img {
    width: 30px;
    height: 30px;
    margin-right: 0;
}

.box .smallBox p {
    display: flex;
    align-items: center;
}

.box .smallBox p span {
    width: 30px;
    height: 20px;
    border: 1px solid red;
    border-radius: 3px;
    font-size: 12px;
    color: red;
    text-align: center;
}

.box .smallBox p b {
    margin-left: 10px;
    font-size: 20px;
    font-weight: bolder;
}

.box .smallBox div {
    margin-top: 10px;
}

.box .smallBox div span {
    font-size: 16px;
    color: black;
    font-weight: bold;
}

.box .count {
    margin-left: 10px;
}
</style>